<template>
	<div class="filters">
		<span
		 v-for='filter in filters' 
		 class="filter" :class="{active:selected == filter.value}" 
		 @click="changeFilter(filter.value)"
		 :key="filter.value">{{filter.label}}</span>
	</div>
</template>

<script lang="ts">
	import {TODO_STATUS} from '@/typings';
	import {defineComponent,PropType,ref} from 'vue'
	export default defineComponent({
		name:'TodoFilter',
		
		setup(props,ctx){
			const filters = [
				{label:"全部",value:TODO_STATUS.ALL},
				{label:"已完成",value:TODO_STATUS.FINISHED},
				{label:"未完成",value:TODO_STATUS.WILLDO},
				{label:"正在做",value:TODO_STATUS.DOING},
			];
			
			const changeFilter = (filterValue:TODO_STATUS) =>{
				selected.value = filterValue;
				ctx.emit('changeFilter',filterValue);
			}
			let selected = ref(TODO_STATUS.ALL);
			
			
			
			return {
				filters,
				selected,
				changeFilter
			};
		},
	});
</script>

<style scoped>
	.filters{
		display: flex;
		margin: 24px 2px;
		padding-left: 12px;
		color: #c0c2ce;
		font-size: 14px;
	}
	.filters .filter{
		margin-right: 14px;
		transition: 0.8s;
	}
	.filters .filter.active{
		color: #6b729c;
		transform: scale(1.2);
	}
</style>
